<!--
pinia状态管理库：
!安装指令
  yarn add pinia
  npm/cnpm/pnpm install pinia
!Pinia:
  Pinia 状态管理是一种管理全局状态的工具，用于解决多个组件之间共享状态的问题。Pinia 是 Vue 3 官方推荐的状态管理库，其核心目标是简洁、现代、直观，并且完全支持组合式 API 和 TypeScript
!Pinia 状态管理是什么
核心概念：
  1、Store（存储）：一个定义了状态（state）、计算属性（getters）和动作（actions）的模块。
  2、State（状态）: 存储全局响应式数据。。
  3、Getters（派生状态）: 类似于计算属性，用于基于 State 计算值。
  4、Actions（操作）: 定义修改状态的方法或异步操作。
功能特点：
  1、模块化: 可以定义多个独立的 Store，按需引入。
  2、响应式: Store 的状态是响应式的，支持 Vue 的 ref 和 reactive。
  3、与 TypeScript 集成: 提供强大的类型推导和类型检查。
  4、支持插件: 可扩展功能，如状态持久化、缓存等。
适用场景
  1、多组件共享的全局数据。
  2、需要派生状态的复杂计算。
  3、需要在状态变更时触发逻辑
!defineStore 的含义和作用
  在 Pinia 中，defineStore 是一个函数，用于定义和创建一个 Store。Store 是 Pinia 的核心概念，用于管理全局的状态数据。
!defineStore 的作用
  1、定义一个全局状态管理模块。
  2、指定该 Store 的 名称 和 结构（包括状态、派生状态和操作）。
  3、提供一个可复用的实例，供 Vue 组件使用。
语法：
  const useStore = defineStore(
    id,  // Store 的唯一标识（字符串）
    options // 配置对象，定义状态、派生状态和方法
  );
参数说明：
  1、id（必需）
    1-1、类型：string。
    1-2、Store 的唯一标识，用于区分不同的 Store。
    1-3、例如：'counters' 是 Store 的名称，表示这个 Store 管理计数器相关的状态。
  2、options（必需）
    2-1、类型：对象。
    2-2、用来定义 Store 的 状态（state）、派生状态（getters） 和 方法（actions）。
    2-3、典型的结构如下：
      {
        state: () => ({ /* 状态数据 */ }),
        getters: { /* 派生状态 */ },
        actions: { /* 修改状态的方法 */ },
      }
!Store（存储）的方法
    1、重置整个 state
      使用 Pinia 的 this.$reset() 方法，可以将 state 重置为初始状态（适用于选项式 API）。
    2、修改：$patch()
    3、替换：$state()
-->
<template>
  <div id="wrap">
    <h1>状态管理pinia</h1>
    <!-- 选项式写法 -->
    <p>{{`${counterStore1.count},${counterStore1.name},${counterStore1.isAdmin},${counterStore1.items},${counterStore1.hasChanged},`}}</p>
    <p>Count状态:{{ counterStore1.count }}</p>
    <p>name状态：{{ counterStore1.name }}</p>
    <p>doubleCount派生:{{ counterStore1.doubleCount }}</p>
    <p>doubleCount派生+1:{{ counterStore1.doublePlusone }}</p>
    <button @click="counterStore1.increment">increment方法</button>
    <button @click="counterStore1.$reset">reset</button>
    <button @click="counterStore1.reset">reset1</button>
    <button @click="counterStore1.$patch({ count: 10, name: 'jion' })">
      修改state的count和name
    </button>
    <button @click="counterStore1.$state={ count: 10, name: 'jion',isAdmin:false,items:[],hasChanged:false}">
      替换state的内容
    </button>

    <!-- 组合式 -->
    <p>Count状态:{{ counterStore2.count }}</p>
    <p>name状态：{{ counterStore2.name }}</p>
    <p>isAdmin状态：{{counterStore2.isAdmin}}</p>
    <p>doubleCount派生:{{ counterStore2.doubleCount }}</p>
    <p>doubleCount派生+1:{{ counterStore2.doublePlusone }}</p>
    <button @click="counterStore2.increment">increment方法</button>
    <button @click="counterStore2.reset">reset</button>
    <button @click="counterStore2.$patch({ count: 10, name:'join' })">
      修改state的count和name
    </button>
    <button @click="counterStore2.$state={ count: 100, name:'family',isAdmin:false}">
      替换state的内容
    </button>
    <p>Count状态:{{ count }}</p>
    <p>name状态：{{ doubleCount }}</p>
    <p>isAdmin状态：{{isAdmin}}</p>
    <button @click="increment">increment方法</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo63',
};
</script>

<script lang="ts" setup>
import { useStoreOne,useStoretwo } from '@/stores/index';
const counterStore1 = useStoreOne();
const counterStore2 = useStoretwo();
//store允许解构  选项式允许解构
// const { count, doubleCount, increment } = useStoreOne();
// console.log(count, doubleCount, increment);

//组合式的不允许解构，解构会失去响应式
const { count, doubleCount,isAdmin, increment } = useStoretwo();
console.log(count, doubleCount,isAdmin,increment);
</script>

<style lang="scss"></style>
